Projet 8 - CodeMirror, conceal, Svelte"

Date de la création de cette note : mercredi 3 juillet 2024.

Quel est l'objectif de ce projet ?

Je souhaite implémenter un éditeur Markdown dans une application web frontend utilisant Svelte. Cet éditeur doit supporter la fonctionnalité de conceal en utilisant la librairie CodeMirror.

Plus précisément, mon objectif est de reproduire le comportement des "liens internes avec texte d'affichage" de Obsidian. Cela signifie que lorsque le curseur de l'éditeur n'est pas positionné sur la ligne contenant [[foobar|title]], seul title est affiché avec un style spécifique. Lorsque le curseur se trouve sur la ligne de [[foobar|title]], alors [[foobar|title]] est affiché intégralement.

Ce projet est en lien avec Projet 1 - "CodeMirror, autocomplétion, Svelte".

Pourquoi je souhaite réaliser ce projet ?

J'ai besoin d'implémenter une fonctionnalité Conceal dans l'application Value Props.

Repository de ce projet :

https://github.com/stephane-klein/svelte-codemirror-conceal-poc

Journaux liées à cette note :

Après 11h48 de travail, j'ai enfin réussi à achever mon Projet 8 - "CodeMirror, conceal, Svelte".

Consultez de détailler dans le README du repository : https://github.com/stephane-klein/svelte-codemirror-conceal-poc.

Projet 8 - "CodeMirror, conceal, Svelte", je découvre ici la méthode pour déclarer un Widget CodeMirror vide :

export const invisibleDecoration = Decoration.replace({});

Suite de Projet 8 - "CodeMirror, conceal, Svelte".

#JaiDécouvert lezer-markdown-obsidian qui correspond à ce que j'ai besoin pour 2024-08-06_1140.

Je viens de voir ici une propriété complete :

class FootnoteReferenceParser implements LeafBlockParser {

  ...

  complete(cx: BlockContext, leaf: LeafBlock) {
    cx.addLeafElement(
      leaf,
      cx.elt(
        "FootnoteReference",
        leaf.start,
        leaf.start + leaf.content.length,
        [
          cx.elt("FootnoteMark", leaf.start, leaf.start + 2),
          cx.elt("FootnoteLabel", leaf.start + 2, this.labelEnd - 2),
          cx.elt("FootnoteMark", this.labelEnd - 2, this.labelEnd),
          ...cx.parser.parseInline(
            leaf.content.slice(this.labelEnd - leaf.start),
            this.labelEnd
          ),
        ]
      )
    );
    return true;
  }
}

Dans le Projet 1 - "CodeMirror, autocomplétion, Svelte", #JeMeDemande si je ne suis pas passé à coté d'une meilleur méthode pour implémenter de l'auto complétiion dans CodeMirror 🤔.

Suite de Projet 8 - "CodeMirror, conceal, Svelte".

J'essaie d'implémenter un "Replacing Dectorator" CodeMirror basé sur une recheche syntaxTree. -- from

J'essaie de m'inspirer de ces implémentations lezer-parser/markdown/src/extension.ts#L10 et /silverbulletmd/silverbullet/common/markdown_parser/parser.ts#L30.

Suite de Projet 8 - "CodeMirror, conceal, Svelte".

J'essaie d'implémenter un "Replacing Dectorator" CodeMirror basé sur une recheche syntaxTree.

J'essaie de m'inspirer de /examples/decoration/checkbox.ts.

Dans le cadre du Projet 8 - "CodeMirror, conceal, Svelte", j'essaie de m'inspirer du code source de SilverBullet.mb.

#JeMeDemande si l'implémentation de la fonctionnalité conceal sur les wikilink se trouve ici 🤔.

Je constate ici que l'implémentation ne prend pas en charge directement la recherche des de la syntax [[wikilink]] via, par exemple, une regex, mais l'implémentation semble utiliser un parser Markdown.

Je constate ici que SilverBullet.mb est basé sur la lib lezer. Ce qui me semble normal, parce que le plugin lang-markdown utilise aussi lezer.

Je ne trouve aucune mention de wikilink dans le code source de /lezer-parser/markdown/, par conséquent, je pense que ce type d'élément a été implémenté dans le code source de SilverBullet.mb.

Le parser le wikilink semble être implémenté ici.

#JeLis la section Example: Decorations de CodeMirror qui je pense me sera très utile pour Projet 8.

#JaiDécouvert ici MatchDecorator. Je pense devoir utiliser MatchDecorator pour implémenter Projet 8.

#JaiDécouvert l'article [Learning CodeMirror] que #JeSouhaite lire.

L'implémentation dans SilverBullet.mb de la fonctionnalité décrite dans Projet 8 se trouve ici.

Dans le cadre du projet Projet 8, je suis en train de lire la section "Guide" de la documentation CodeMirror. Je suis impressionné par le niveau de perfectionnement de ce projet.